<!-- src/views/MessageView.vue -->
<template>
  <div class="message-board">
    <!-- 页面标题 -->
    <div class="header">
      <h1 class="title">福州印象 · 游客分享墙</h1>
      <p class="subtitle">分享你的有福之旅，点亮榕城记忆</p>
    </div>

    <!-- 双区布局 -->
    <div class="board-container">
      <!-- 左侧：发帖区 -->
      <div class="post-section">
        <el-card shadow="never" class="post-card">
          <h3 class="post-title">发表你的福州之旅</h3>
          <el-form
            :model="postForm"
            :rules="rules"
            ref="postFormRef"
            @submit.prevent="submitPost"
          >
            <!-- 昵称 -->
            <el-form-item prop="nickname">
              <el-input
                v-model="postForm.nickname"
                placeholder="你的称呼（必填）"
                clearable
                maxlength="10"
                show-word-limit
              />
            </el-form-item>

            <!-- 内容 -->
            <el-form-item prop="content">
              <el-input
                v-model="postForm.content"
                type="textarea"
                :rows="5"
                placeholder="分享你的福州旅行见闻、推荐景点或美食体验…（不少于15字）"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>

            <!-- 评分 -->
            <el-form-item label="旅行体验评分" prop="rating">
              <el-rate
                v-model="postForm.rating"
                :max="5"
                allow-half
                show-score
                text-color="#ff9900"
              />
            </el-form-item>

            <!-- 标签 -->
            <el-form-item label="添加标签" prop="tags">
              <el-select
                v-model="postForm.tags"
                multiple
                allow-create
                default-first-option
                filterable
                placeholder="例如：#三坊七巷、#佛跳墙、#茉莉花茶"
                style="width: 100%;"
              />
            </el-form-item>

            <!-- 提交按钮 -->
            <el-form-item>
              <el-button
                type="primary"
                native-type="submit"
                :loading="submitting"
                style="width: 100%;"
              >
                {{ submitting ? '发布中...' : '发 布 分 享' }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 右侧：阅读帖列表 -->
      <div class="feed-section">
        <h3 class="feed-title">
          最新分享 · 共 {{ posts.length }} 条
        </h3>

        <div v-if="posts.length === 0" class="empty">
          <el-empty description="暂无分享，快来成为第一个点亮榕城的人吧～" />
        </div>

        <div v-else class="posts-list">
          <div
            v-for="(post, index) in posts"
            :key="index"
            class="post-item"
            @click="viewPost(post)"
          >
            <!-- 发帖人 & 时间 -->
            <div class="post-header">
              <el-avatar :size="36" :src="getAvatar()" />
              <div class="user-info">
                <span class="nickname">{{ post.nickname }}</span>
                <span class="time">{{ formatTimeAgo(post.time) }}</span>
              </div>
            </div>

            <!-- 内容预览 -->
            <div class="post-content">
              {{ truncateText(post.content, 80) }}
            </div>

            <!-- 评分 -->
            <div class="post-rating">
              <el-rate v-model="post.rating" disabled text-color="#ff9900" :max="5" />
            </div>

            <!-- 标签 -->
            <div class="post-tags">
              <el-tag
                v-for="tag in post.tags"
                :key="tag"
                size="small"
                type="info"
                style="margin-right: 6px; margin-bottom: 4px;"
              >
                #{{ tag }}
              </el-tag>
            </div>

            <!-- 统计信息 -->
            <div class="post-stats">
              <span><i class="el-icon-view"></i> {{ post.views }}</span>
              <span><i class="el-icon-chat-line-round"></i> {{ post.comments }}</span>
              <span><i class="el-icon-thumb"></i> {{ post.likes }}</span>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <el-pagination
          v-if="posts.length > pageSize"
          small
          background
          layout="prev, pager, next"
          :total="posts.length"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
          class="pagination"
        />
      </div>
    </div>

    <!-- 底部装饰 -->
    <div class="footer">
      <p>© 2025 福州印象 · 有福之州，幸福之城</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 发帖表单
const postForm = reactive({
  nickname: '',
  content: '',
  rating: 5,
  tags: []
})

const postFormRef = ref(null)
const submitting = ref(false)

// 帖子列表（模拟数据）
const posts = ref([
  {
    nickname: '闽江夜语',
    content: '夜游闽江太震撼了！灯光秀映照在江面上，配上微风，幸福感爆棚。推荐大家一定要来体验。',
    rating: 5,
    tags: ['闽江夜游', '灯光秀', '夜景'],
    time: Date.now() - 2 * 60 * 60 * 1000,
    views: 128,
    likes: 34,
    comments: 8
  },
  {
    nickname: '三坊七巷客',
    content: '青石板路、白墙灰瓦，三坊七巷真的很有历史感。吃了同利肉燕，味道正宗！',
    rating: 4.5,
    tags: ['三坊七巷', '古厝', '福州小吃'],
    time: Date.now() - 5 * 60 * 60 * 1000,
    views: 203,
    likes: 41,
    comments: 12
  },
  {
    nickname: '鼓山行者',
    content: '爬鼓山虽然累，但登顶后云海翻腾，仿佛置身仙境。下山顺便喝了碗地道的鱼丸汤，完美！',
    rating: 5,
    tags: ['鼓山', '登山', '云海'],
    time: Date.now() - 12 * 60 * 60 * 1000,
    views: 156,
    likes: 29,
    comments: 6
  },
  {
    nickname: '茉莉寻香',
    content: '在三坊七巷的茶馆里喝了一杯茉莉花茶，清香扑鼻，老板还讲了福州茶文化，受益匪浅。',
    rating: 4,
    tags: ['茉莉花茶', '茶文化', '慢生活'],
    time: Date.now() - 20 * 60 * 60 * 1000,
    views: 95,
    likes: 18,
    comments: 5
  }
])

// 分页
const currentPage = ref(1)
const pageSize = 5

const paginatedPosts = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return posts.value.slice(start, start + pageSize)
})

// 表单验证
const rules = reactive({
  nickname: [
    { required: true, message: '请输入称呼', trigger: 'blur' },
    { min: 1, max: 10, message: '长度为 1-10 个字符', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入分享内容', trigger: 'blur' },
    { min: 15, message: '至少输入15个字', trigger: 'blur' }
  ],
  rating: [
    { required: true, message: '请为旅行体验评分', trigger: 'change' }
  ]
})

// 提交新帖
const submitPost = () => {
  postFormRef.value.validate(valid => {
    if (!valid) {
      ElMessage.error('请填写完整信息')
      return
    }

    submitting.value = true

    // 模拟异步提交
    setTimeout(() => {
      posts.value.unshift({
        ...postForm,
        time: Date.now(),
        views: Math.floor(Math.random() * 50) + 10,
        likes: Math.floor(Math.random() * 20),
        comments: Math.floor(Math.random() * 10)
      })

      // 重置表单
      postFormRef.value.resetFields()
      postForm.tags = []
      postForm.rating = 5
      submitting.value = false
      ElMessage.success('分享发布成功！')

      // 回到第一页
      currentPage.value = 1
    }, 800)
  })
}

// 查看帖子（模拟弹窗或跳转详情页）
const viewPost = (post) => {
  // 模拟浏览量+1
  post.views++

  ElMessageBox.alert(`
    <div style="text-align: left; line-height: 1.8;">
      <p><strong>昵称：</strong>${post.nickname}</p>
      <p><strong>体验评分：</strong>${post.rating} 星</p>
      <p><strong>内容：</strong>${post.content}</p>
      <p><strong>标签：</strong>${post.tags.map(t => '#' + t).join(' ')}</p>
      <p><strong>发布时间：</strong>${formatTimeAgo(post.time)} 发布</p>
      <p><strong>浏览：</strong>${post.views} | <strong>点赞：</strong>${post.likes} | <strong>评论：</strong>${post.comments}</p>
    </div>
  `, '分享详情', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '关闭',
    callback: () => {}
  })
}

// 分页切换
const handlePageChange = (page) => {
  currentPage.value = page
}

// 工具函数
const getAvatar = () => {
  const avatars = [
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c29f1a93c0ac8653.jpg',
    'https://cube.elemecdn.com/6/94/ae2e1b0fcb35bd936d75b56954eaf.jpeg',
    'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  ]
  return avatars[Math.floor(Math.random() * avatars.length)]
}

const formatTimeAgo = (timestamp) => {
  const now = Date.now()
  const diff = now - timestamp
  const minute = 60 * 1000
  const hour = 60 * minute
  const day = 24 * hour

  if (diff < minute) return '刚刚'
  if (diff < hour) return `${Math.floor(diff / minute)}分钟前`
  if (diff < day) return `${Math.floor(diff / hour)}小时前`
  return `${Math.floor(diff / day)}天前`
}

const truncateText = (text, length) => {
  return text.length > length ? text.slice(0, length) + '...' : text
}
</script>

<style scoped>
.message-board {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #444;
  background: linear-gradient(to bottom, #f0f9ff, #ffffff);
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 32px;
  color: #006666;
  margin: 0;
  font-weight: 600;
}

.subtitle {
  color: #666;
  font-size: 16px;
  margin-top: 8px;
}

.board-container {
  display: flex;
  gap: 30px;
  min-height: 500px;
}

/* 左侧发帖区 */
.post-section {
  flex: 1;
  max-width: 500px;
}

.post-card {
  border-radius: 16px;
  border: 1px solid #b2dfdb;
  background: #e8f5f5;
}

.post-title {
  font-size: 18px;
  color: #006666;
  margin: 0 0 20px 0;
  font-weight: 500;
}

/* 右侧阅读区 */
.feed-section {
  flex: 2;
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.feed-title {
  font-size: 18px;
  color: #333;
  margin: 0 0 20px 0;
  font-weight: 500;
  border-left: 4px solid #006666;
  padding-left: 12px;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-item {
  padding: 18px;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fcfcfc;
}

.post-item:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(0, 102, 102, 0.1);
  transform: translateY(-2px);
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-info {
  margin-left: 12px;
}

.nickname {
  font-weight: 600;
  color: #006666;
  font-size: 15px;
}

.time {
  font-size: 12px;
  color: #999;
}

.post-content {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 10px;
}

.post-rating {
  margin-bottom: 8px;
}

.post-tags {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
}

.post-stats {
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
  color: #888;
  gap: 16px;
}

.post-stats i {
  margin-right: 4px;
}

.pagination {
  margin-top: 30px;
  justify-content: center;
}

.empty {
  text-align: center;
  padding: 60px 0;
  color: #999;
}

.footer {
  text-align: center;
  margin-top: 50px;
  color: #aaa;
  font-size: 13px;
}

/* 响应式 */
@media (max-width: 992px) {
  .board-container {
    flex-direction: column;
    align-items: center;
  }
  .post-section {
    max-width: 100%;
  }
}
</style>